<template>
  <div id="app">
    <a-row :gutter="24" style="height: 100%">
      <a-col :span="12" style="height: 100%">
        <a-card>
          <a-form :model="form" :style="{ width: '600px' }">
            <a-form-item field="title" label="标题">
              <a-input v-model="form.title" placeholder="在此输入标题" />
            </a-form-item>
            <a-form-item field="content" label="题目描述" style="width: 100%">
              <a-textarea
                v-model="form.content"
                style="height: 300px"
                placeholder="在此输入题目描述"
              />
            </a-form-item>
            <a-form-item label="题目标签">
              <a-input-tag
                v-model="form.tags"
                :style="{ width: '320px' }"
                placeholder="按Enter键入题目标签"
                allow-clear
              />
            </a-form-item>
            <a-form-item label="时间限制">
              <a-input-number
                v-model="form.judgeConfig.timeLimit"
                :style="{ width: '320px' }"
                placeholder="时间限制"
                mode="button"
                model-event="input"
              />
            </a-form-item>
            <a-form-item label="内存限制">
              <a-input-number
                v-model="form.judgeConfig.memoryLimit"
                :style="{ width: '320px' }"
                placeholder="内存限制"
                mode="button"
                model-event="input"
              />
            </a-form-item>
            <a-form-item label="堆栈限制">
              <a-input-number
                v-model="form.judgeConfig.stackLimit"
                :style="{ width: '320px' }"
                placeholder="堆栈限制"
                mode="button"
                model-event="input"
              />
            </a-form-item>
            <a-form-item>
              <a-button @click="handleSubmit">提交题目</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="12" style="height: 100%">
        <h2>题目描述预览(支持md语法)</h2>
        <a-card hoverable>
          <div id="viewer">
            <MdViewer style="float: left" :value="form.content" />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { QuestionControllerService } from "@/service";
import { Message } from "@arco-design/web-vue";
import MdViewer from "@/components/MdViewer.vue";

const route = useRoute();
const updatePage = route.path.includes("update");
const form = ref({
  title: "",
  content: "",
  tags: [],
  judgeConfig: {
    timeLimit: 1000,
    memoryLimit: 1000,
    stackLimit: 1000,
  },
});
const contentChange = (s: string) => {
  form.value.content = s;
};
const loadData = async () => {
  const id = route.query.id;
  if (!id) {
    return;
  }
  const res = await QuestionControllerService.getQuestionById(id as never);
  if (res.code !== 0) {
    Message.error("获取原始数据失败");
    return;
  }
  form.value = res.data as never;
};
onMounted(() => {
  loadData();
});
watchEffect(() => {
  loadData();
});

const handleSubmit = async () => {
  if (updatePage) {
    const res = await QuestionControllerService.updateQuestion({
      ...form,
      id: route.query.id as never,
    });
    if (res.code !== 0) {
      Message.info("更新失败:" + res.message);
      return;
    }
    Message.info("更新成功");
  } else {
    const res = await QuestionControllerService.addQuestion({
      ...form.value,
    });
    if (res.code !== 0) {
      Message.info("创建失败:" + res.message);
      return;
    }
    Message.info("创建成功");
  }
};
</script>
<style scoped>
#app {
  margin-top: 20px;
}

#viewer {
  width: 90%;
  height: 600px;
  /*display: flex;*/
  /*flex-flow: column;*/
  /*overflow: auto;*/
}

::-webkit-scrollbar-thumb {
  background-color: transparent;
}

::-webkit-scrollbar {
  background-color: transparent;
}
</style>
